<template>
	<view class='confirm-order bg-active-color'>
		<!--地址-->
		<Lines></Lines>
		<Lines></Lines>
		<view class='order-map' @tap="goPathList">
			<template v-if='path'>
				<view class='map-title'>
					<view class='map-name'>收件人：{{path.name}}</view>
					<view>{{path.tel}}</view>
				</view>
				<view class='map-city'>收货地址：{{path.province}} {{path.city}} {{path.district}}</view>
			</template>
			<template v-else>
				<view class="">
					请选择地址
				</view>
			</template>
		</view>
		
		<!--商品-->
		<view class='goods-list'>
					<view class='goods-content bg-active-color'
						v-for='(item,index) in listList'
						:key='index'
					>
						<image class='goods-img' :src='item.imgUrl' mode=""></image>
						<view class='goods-text'>
							<view class='goods-name'>{{item.name}}</view>
							<view class='goods-size f-color'>颜色分类：黑色</view>
							<view class='f-active-color' style='font-size:24rpx'>7天无理由</view>
						</view>
						<view>
							<view>¥{{item.pprice}}</view>
							<view class='f-color'>*{{item.num}}</view>
						</view>
					</view>
				</view>
		<!--底部 : 提交订单-->
		<view class='order-foot'>
			<view class='total-price'>合计：<text class='f-active-color'>¥{{totalCount.pprice}}</text></view>
			<view class="confirm" @tap="goPayment">提交订单</view>
		</view>
		
	</view>
</template>

<script setup>
	import $http from '@/common/api/request.js'
	import Lines from '@/components/common/Line.vue'
	import {onLoad,onUnload} from "@dcloudio/uni-app"
	import {usepathStore} from '@/store/path.js'
	import {usecartStore} from '@/store/cart.js'
	import {storeToRefs} from 'pinia'
	import { reactive,ref, computed} from "vue";
	import {
		userorderStore
	} from '@/store/order.js'
	const orderStore = userorderStore()
	const {
		initOrder,orderNumber
	} = storeToRefs(orderStore)
	const item = ref()
	const pathStore = usepathStore()
	const cartStore = usecartStore()
	const path = ref(false)
	const {
		list,
		totalCount
	} = storeToRefs(cartStore)
	onLoad((e)=>{
		item.value = JSON.parse(e.detail);
		//如果有默认地址的一个赋值//如果有默认地址的一个赋值
			$http.request({
				url:"/selectAddress",
				method:"POST",
				header:{
					token:true
				}
			}).then((res)=>{
				pathStore.__initAddressList(res);
				if(pathStore.defaultPath.length){
					path.value = pathStore.defaultPath[0];
				}
			}).catch(()=>{
				uni.showToast({
					title:'请求失败',
					icon:'none'
				})
			})
		//如果出发自定义事件，on去接受值
		uni.$on("selectPathItem",(res)=>{
			path.value=res
		})
	})
	const listList = computed(()=>{
		return item.value.map(id=>{
			return cartStore.list.find(v=>v.id == id);
		})
	})
	onUnload(()=>{
		uni.$off('selectPathItem',()=>{
		})
	})
	
	const goPathList=()=>{
		uni.navigateTo({
			url:'../my-path-list/my-path-list?type=selectPath'
		})
	}
	//跳转到支付页
	const goPayment=()=>{
		if(!path.value){
			return uni.showToast({
				title:'请选择收货地址',
				icon:'none'
			})
		}
		$http.request({
			url:"/submitOrder",
				method:"POST",
				header:{
					token:true
				},
					data:{
							orderId:orderStore.orderNumber,
							shopArr:cartStore.selectList
					}
			}).then((res)=>{
				if( res.success ){
					//跳转到选择支付页面
					uni.navigateTo({
						url:'../payment/payment?details='+JSON.stringify({
							price:cartStore.totalCount.pprice
						})
					})
				}
		}).catch(()=>{
			uni.showToast({
				title:'请求失败',
				icon:'none'
			})
		})
	}
	
</script>

<style scoped>
.confirm-order{
	position: absolute;
	left:0;
	top:0;
	rigth:0;
	bottom:0;
	width:100%;
	height: 100%;
}
.order-map{
	padding:20rpx;
	background-color: #FFFFFF;
	line-height: 40rpx;
}
.map-title{
	display: flex;
	justify-content: space-between;
}
.map-name{
	font-weight: bold;
}

.goods-list{
	margin-top:20rpx;
	background-color: #FFFFFF;
	padding:20rpx 0;
}
.goods-content{
	margin-top:20rpx;
	padding:10rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.goods-text{
	width:360rpx;
	padding:0 10rpx;
	font-size:26rpx;
}
.goods-img{
	width:160rpx;
	height:160rpx;
}
.goods-name{
	font-size:26rpx;
}
.goods-size{
	font-size:24rpx;
}
.order-foot{
	height: 80rpx;
	width:100%;
	position: fixed;
	bottom:0;
	left:0;
	background-color: #FFFFFF;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.total-price{
	padding:0 20rpx;
}
.confirm{
	color:#FFFFFF;
	background-color: #49BDFB;
	padding:10rpx 30rpx;
}
</style>
